<template>
  <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :router="true"
  >
    <el-menu-item index="/">
      <template #title>
        <el-icon>
          <HomeFilled/>
        </el-icon>
        <span>主页</span>
      </template>
    </el-menu-item>
    <el-menu-item index="/postList">
      <template #title>
        <el-icon>
          <document/>
        </el-icon>
        <span>博文列表</span>
      </template>
    </el-menu-item>
    <el-sub-menu index="2">
      <template #title>
        <el-icon>
          <Setting/>
        </el-icon>
        博客配置
      </template>
      <el-menu-item index="/setting">
        <template #title>
          <span> 基础配置 </span>
        </template>
      </el-menu-item>
      <el-menu-item>
        <template #title>
          <span> 分类管理 </span>
        </template>
      </el-menu-item>
      <el-menu-item>
        <template #title>
          <span> 标签管理 </span>
        </template>
      </el-menu-item>
    </el-sub-menu>
    <el-menu-item>
      <template #title>
        <el-icon>
          <Promotion/>
        </el-icon>
        <span> 系统登出 </span>
      </template>
    </el-menu-item>
  </el-menu>

</template>

<script lang="ts" setup>
import {
  Document,
} from '@element-plus/icons-vue'

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style scoped>
.el-menu {
  height: 100vh;
}
</style>